<!DOCTYPE html>
<html>
<head>
<title>AGREE控制演示</title>
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- CSS代码 -->
 
<style>
.menu_list {
width: 268px;
margin: 0;
float:left;
}
 
.menu_head {
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 14px;
color: #525252;
cursor: pointer;
border: 1px solid #f1f1f1;
position: relative;
margin: 0px;
font-weight: bold;
background: #51a9f18c;
}
 
.menu_list .current {
background: #51a9f18c;
}
 
.menu_nva {
line-height: 38px;
border-left: 1px solid #51a9f18c;
backguound: #fff;
border-right: 1px solid #51a9f18c;
}
 
.menu_nva a {
display: block;
height: 38px;
line-height: 38px;
padding-left: 38px;
color: #777777;
background: #fff;
text-decoration: none;
border-bottom: 1px solid #51a9f18c;
}
 
.menu_nva a:hover {
text-decoration: none;
}

.main_right{
    width: 800px;
    height: 600px;
    float:left;
    background:#c0c0c0;
    cursor:pointer;
}

</style>
</head>
 
 
 
<body>
 
<!-- html  start-->
 
<div id="firstpaneDiv" class="menu_list">
<h3 class="menu_head current">HOME</h3>
<div style="display:block" class="menu_nva">
</div>
<h3 class="menu_head">系统管理</h3>
<div style="display:none" class="menu_nva">
<a href="#">菜单管理</a>
<a href="#">账户管理</a>
<a href="#">日志管理</a>
<a href="#">角色管理</a>
<a href="#">编码管理</a>
<a href="#">操作日志</a>
<a href="CDGL.html">流程管理</a>
</div>
<h3 class="menu_head">菜单1</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div>
<h3 class="menu_head">菜单2</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div><h3 class="menu_head">菜单3</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div><h3 class="menu_head">菜单4</h3>
<div style="display:none" class="menu_nva">
<a href="#">用例1xx</a>
<a href="#">用例2xx</a>
<a href="#">用例3xx</a>
<a href="#">用例4xx</a>
<a href="#">用例5xx</a>
<a href="#">用例6xx</a>
<a href="#">用例7xx</a>
<a href="#">用例8xx</a>
</div>
 
</div>

<div class="main_right">
       <iframe frameborder="0" scrolling="no" style="width:100%;height:100%" src="CDGL.html" id="aa"></iframe>
</div>
 
<!-- html  end-->
 
<!-- script  代码-->
 
<script src="jquery.min.js"></script>
<script>
$(document).ready(function()
{
	$("#firstpaneDiv .menu_nva:eq(0)").show();
	$("#firstpaneDiv h3.menu_head").click(function(){
		$(this).addClass("current").next("div.menu_nva").slideToggle(200).siblings("div.menu_nva").slideUp("slow");
		$(this).siblings().removeClass("current");

		//var address =$(this).attr("data-src");
        //$("iframe").attr("src",address);
	});

	$("#secondpane .menu_nva:eq(0)").show();
	$("#secondpane h3.menu_head").mouseover(function(){
		$(this).addClass("current").next("div.menu_nva").slideDown(400).siblings("div.menu_nva").slideUp("slow");
		$(this).siblings().removeClass("current");
	});

});

</script>

</body>
 
</html>
